<!DOCTYPE html>
<html lang="en">
    <head>
        <title>稀土掘金</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="index02.css">
    <link rel="stylesheet" href="index03.css">
    <link rel="icon" href=".\images\juejin.svg" sizes="192x192">
    </head>
    <body>
        <div class="containerBox">
            <div class="container">
                <!-- 导航栏 -->
                <div class="container-head">
                    <div class="container-head-left">
                        <img src=".\images\稀土掘金.svg" alt="稀土掘金">
                    </div>
                    <div class="container-head-middle">
                        <div class="middleNav">首页</div>
                        <div class="middleNav AiCoding">
                            <span class="new">NEW</span>
                            AI Coding</div>
                        <div class="middleNav">沸点</div>
                        <div class="middleNav">课程</div>
                        <div class="middleNav">直播</div>
                        <div class="middleNav">活动</div>
                        <div class="middleNav">AI刷题</div>
                        <div>APP</div>
                        <div>插件</div>
                    </div>
                    <div class="container-head-right">
                        <div  class="searchBox">
                            <div class="search">
                                <input type="text" placeholder="搜索稀土掘金">
                                <img  class="search-img" src=".\images\搜索.svg" alt="搜索">
                            </div>
                            <div class="historyBox">
                                <div class="historyBoxHead"><span>搜索历史记录</span><span>清空</span></div>
                                <div class="historyBoxMain">
                                    <ul class="historyBoxMainList">
                                       
                                      
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="creative">
                            <div class="creative-box">
                                <div class="creative-text">创作中心</div>
                                <img class="creative-img" src=".\images\向下1.svg">
                            </div>
                            
                        </div>
                        <div class="registrationAndLogin">
                            <div class="registrationAndLoginPart01">
                                <img class="vipImg" src=".\images\会员.svg" alt="">
                                <div class="vipCont">会员</div>
                            </div>
                            <div class="registrationAndLoginPart02Box">
                                <div class="registrationAndLoginPart02_">
                                   <div class="registrationAndLoginPart02ImgBox">
                                    <div class="registrationAndLoginPart02Img01">
                                         <img src=".\images\211铃铛.svg" alt="消息">
                                        <div class="registrationAndLoginPart02ImgBillBox">
                                            <div  class="registrationAndLoginPart02ImgBill">
                                               <ul>
                                                <li>评论</li>
                                                <li>赞和收藏</li>
                                                <li>新增粉丝</li>
                                                <li>私信</li>
                                                <li>系统通知</li>
                                               </ul>
                                            </div>
                                        </div>
                                        </div>
                                   <div class="registrationAndLoginPart02Img02">
                                    <img src=".\images\用户头像.svg" alt="用户头像">
                                
                                    <div class="userBox">
                                     <div class="userBill">
                                        <div class="userInfo01">
                                            <img src=".\images\用户头像.svg" alt="">
                                            <a href="javaScript:;">
                                                <div>用户123456</div>
                                            </a>
                                        </div>
                                        <div class="userInfo02">
                                            <a href="javaScript:;">
                                              <div class="itemCount">0</div>
                                              <div class="itemName">关注</div>
                                            </a>
                                            <a href="javaScript:;">
                                                <div class="itemCount">0</div>
                                                <div class="itemName">赞过</div>
                                            </a>
                                            <a href="javaScript:;">
                                                <div class="itemCount">0</div>
                                                <div class="itemName">收藏</div>
                                            </a>
                                        </div>
                                        <div class="userFuc01">
                                            <ul class="userFuc01Box">
                                                <a href="javaScript:;" id="myPage" >
                                                    <img src=".\images\我的主页.svg" alt="">
                                                    <li>我的主页</li>
                                                </a>
                                                <li><img src=".\images\福利.svg" alt="">成长福利</li>
                                                <li><img src=".\images\笔记本、笔记.svg" alt="">闪念笔记</li>
                                                <li><img src=".\images\会员 (1).svg" alt="">会员中心</li>
                                                <li><img src=".\images\课程中心.svg" alt="">课程中心</li>
                                                <li><img src=".\images\优惠券.svg" alt="">我的优惠</li>
                                                <li><img src=".\images\报名.svg" alt="">我的报名</li>
                                                <li><img src=".\images\足迹.svg" alt="">我的足迹</li>
                                            </ul>
                                        </div>
                                        <div class="userFuc02">
                                         <div> 我的设置</div> 
                                         <div>退出登录</div>
                                        </div>
                                     </div>
                                    </div>
                                </div>
                                </div>
                        
                                </div>
                                <div class="registrationAndLoginPart02">
                                    <div class="registrationAndLoginPart02Cont01">登录</div>
                                    <div class="registrationAndLoginPart02Cont02">
                                        <div class="line"></div>
                                            注册
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 首页 -->
                    <div class="containerMain" data-box="containerMain">
                        <div class="containerMainLeft">
                            <a class="containerMainLeft01" href="#">
                                <img src=".\images\关注列表.svg" alt="关注">
                                <span>关注</span>
                            </a>
                            <a class="containerMainLeft02" href="#">
                                <img src=".\images\指南针.svg" alt="综合">
                                <span>综合</span>
                            </a>
                            <a class="containerMainLeft03" href="#">
                                <img src=".\images\前后端切换.svg" alt="后端">
                                <span>后端</span>
                            </a>
                            <a  class="containerMainLeft04"href="#">
                                <img src=".\images\前端.svg" alt="前端">
                                <span>前端</span>
                            </a>
                            <a class="containerMainLeft05" href="#">
                                <img src=".\images\android.svg" alt="Android">
                                <span>Android</span>
                            </a>
                            <a class="containerMainLeft06" href="#">
                                <img src=".\images\ios.svg" alt="iOS">
                                <span>iOS</span>
                            </a>
                            <a class="containerMainLeft07" href="#">
                                <img src=".\images\robot-2-line.svg" alt="人工智能">
                                <span>人工智能</span>
                            </a>
                            <a class="containerMainLeft08" href="#">
                                <img src=".\images\开发工具.svg" alt="开发工具">
                                <span>开发工具</span>
                            </a>
                            <a class="containerMainLeft09" href="#">
                                <img src=".\images\script代码.svg" alt="代码人生">
                                <span>代码人生</span>
                            </a>
                            <a class="containerMainLeft10" href="#">
                                <img src=".\images\阅读.svg" alt="阅读">
                                <span>阅读</span>
                            </a>
                            <a class="containerMainLeft11" href="#">
                                <img src=".\images\排行榜.svg" alt="排行榜">
                                <span>排行榜</span>
                            </a>
                    
                        </div>
                        <div class="containerMainMiddle">
                            <div class="twoNav">
                                <a class="reommend">推荐</a>
                                <a class="mostHot">最新</a>
                                <div class="line"></div>
                            </div>
                            <div class="textBody">
                                <div class="textBodyArticleBox">
                                    <div class="textBodyArticleContent">
                                        <div>123</div>
                                        <div>内容简介</div>
                                        <div>
                                            2025-01-01
                                        </div>
                                    </div>
                                    <div class="textBodyArticleImg">
                                        <img src=".\images\通用管理.svg" alt="文章图片">
                                    </div>
                                </div>
                               
                            </div>
                        </div>
                    <div class="containerMainRightBox">
                        <div class="containerMainRight">
                            <div class="containerMainRightContent">
                                    <div class="containerMainRight01">
                                        <div class="containerMainRight01Left">
                                            <div>下午好 !</div>
                                            <div>点亮社区的每一天</div>
                                        </div>
                                        <div class="containerMainRight01Right">
                                            <div class="containerMainRight01RightBtn">去签到</div>
                                        </div>
                                    </div>
                                    <div class="containerMainRight02">
                                       <div class="containerMainRight02Head"> 
                                        <img src=".\images\文章.svg" alt="文章"><span>文章榜</span>
                                     </div>
                                       <div class="containerMainRight02Content">
                                        <div><span>1</span><span>asd</span></div>
                                       </div>
                                       <div class="containerMainRight02Button">查看更多</div>

                                    </div>
                                    <div class="containerMainRight03">
                                        <!-- 轮播图 -->
                                    <div class="imgBox">
                                        <img class="imgLeftGo icon" src=".\images\按钮_箭头向左_o.svg" alt="">
                                        <ul class="dotBox">
                                            <li class="active"></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                        <img class="imgRightGo icon" src=".\images\按钮-箭头向右_o.svg" alt="">
                                    </div>
                                    </div>
                                
                                    
                                    <div class="containerMainRight06">
                                        <div>用户协议 营业执照 隐私资源 关于我们 使用指南 友情链接 更多文章</div>
                                        <div>举报邮箱： feedback@xitu.io</div>
                                        <div>座机电话： 010-83434395</div>
                                        <div>
                                            京ICP备：18012699号-3
                                        </div>
                                        <div>
                                            京ICP证：京B2-20191272
                                        </div>
                                        <div>
                                            <img src="//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/police.d0289dc.png" alt="">
                                            京公网安备11010802026719号
                                        </div>
                                        <div>©2025 稀土掘金</div>
                                    
                                    </div>
                                    <div class="containerMainRight07"></div>
                            </div>
                        
                        </div>
                        <div class="containerMainRightScroll">
                            <div class="containerMainRightScrollContent">
                                <div class="containerMainRight02">
                                    <div class="containerMainRight02Head"> 
                                        <img src=".\images\文章.svg" alt="文章"><span>文章榜</span>
                                     </div>
                                       <div class="containerMainRight02Content">
                                        <div><span>1</span><span>asd</span></div>
                                       </div>
                                       <div class="containerMainRight02Button">查看更多</div>
                                </div>
                             
                            </div>
                    
                
                    </div>
                
                    </div>
                </div>
                <!-- 登录窗口 -->
                <div class="loginBox"> 
                    <div class="loginBoxContent">
                        <div class="loginBoxHead">
                        <img src=".\images\错叉_块.svg" alt="叉"  class="loginBoxClose">
                        <h2>登录掘金畅享更多权益</h2>
                        </div>
                        <form class="loginBoxForm">
                            <input type="text" placeholder="邮箱" data-name="email"><span></span>
                            <input type="text" placeholder="用户名" data-name="userName"><span></span>
                            <input type="password" placeholder="密码" data-name="passWord" ><span></span>
                       
                        <div class="loginBoxBtn">
                            <div class="loginBoxBtn01">注册</div>
                            <div class="loginBoxBtn02">登录</div>
                        </div>
                    <div class="loginBoxBottom">
                        <div>注册登录即表示同意 <span>用户协议</span> 和 <span>隐私政策</span></div>
                        <div class="loginBoxBottom02">
                            <input type="checkbox" id="trae" required>
                        <label for="trae"  class="loginBoxBottom02"> 注册时允许授权注册Trae <span>用户协议</span> 和 <span>隐私政策</span></label>
                        </div>
                    </div>
                     </form>
                    </div>
    
                </div>
                <!--  评论 赞 粉丝 私信 通知-->
                <div class="personalBox" data-box="personalBox">
                    <div class="personalNavBox">
                        <div class="personalNav">
                            <div data-id="1">评论</div>
                            <div data-id="2">赞和收藏</div>
                            <div data-id="3">新增粉丝</div>
                            <div data-id="4">私信</div>
                            <div data-id="5">系统通知</div>
                        </div>
                    </div>
                    <div class="personalBody">
                        <div class="personalBodyMain">
                            <img src=".\images\personal.svg" alt="无消息">
                            <p>暂无消息</p>
                        </div>
                    </div>
                    
                </div>
                <!-- 我的主页 -->
                <div class="myHomePageBox" data-box="myHomePageBox">
                    <div class="myHomePage">
                        <div class="myHomePagLeft">
                            <div  class="myHomePagLeftHead">
                                <div class="myHomePagLeftHeadInfo">
                                    <img src=".\images\用户头像.svg" alt="">
                                    <div>用户123456</div>
                                </div>
                                <div class="myHomePagLeftHeadBtn">设置</div>
                            </div>
                            <div  class="myHomePagLeftMainBox">
                                <div class="myHomePagLeftMainNav">
                                    <div>动态  <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>文章 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>专栏 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>沸点 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>收藏集 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>关注 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>作品 <div id="myHomePagLeftMainNavline"></div></div>
                                    <div>赞</div>
                                   
                                </div>
                                <div class="myHomePagLeftMainContent">
                                    <div class="myHomePagLeftMainContentHead">
                                        <div>关注</div>
                                    </div>
                                    <div class="myHomePagLeftMainContentBody">
                                        <div class="myIdolBox">
                                            <div class="myIdolImg">
                                                <img src=".\images\头像.svg" alt="">
                                            </div>
                                            <div class="myIdolIntro">用户678910</div>
                                            <div class="myIdolIsFollow">已关注</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="myHomePageRight">
                        <div class="myHomePageRightFollow">
                            <a>
                                <div>关注了</div>
                                <div>0</div>
                            </a>
                            <a>
                                <div>关注者</div>
                                <div>0</div>
                            </a>
                        </div>
                        <div class="myHomePageRightInfo">
                           <a href="javaScript:;">
                            <div>收藏集</div>
                            <div>0</div>
                           </a>
                           <a href="javaScript:;">
                            <div>关注标签</div>
                            <div>0</div>
                           </a>
                           <a href="javaScript:;">
                            <div>加入于</div>
                            <div>2025-01-01</div>
                           </a>
                        </div>
                    </div>
                    </div>
                </div>
                 <!-- 个人资料 修改 -->
             <div class="personalDataBox" data-box="personalDataBox">
                <div class="personalDataHead">
                    <div>
                        <img src="./images/返回 (1).svg" alt="返回标志">
                    <span>返回个人主页</span>
                    </div>
                </div>
                <div class="personalDataMain">
                  <div class="personalDataMainLeft">
                    <div class="divActive"><img src="./images/个人资料.svg" alt="1"><span>个人资料</span></div>
                    <div><img src="./images/账号.svg" alt="2"><span>账号设置</span></div>
                    <div><img src="./images/通用管理.svg" alt="3"><span>通用设置</span></div>
                    <div><img src="./images/消息设置.svg" alt="4"><span>消息设置</span></div>
                    <div><img src=".\images\屏蔽.svg" alt="5"><span>屏蔽管理</span></div>
                    <div><img src=".\images\标签.svg" alt="6"><span>标签管理</span></div>
                  </div>
                  <div class="personalDataMainRightBox">
                    <div class="personalDataMainRight">
                        <div  class="personalDataMainRightH">个人资料</div>
                        <div  class="personalDataMainRightB">
                            <div class="personalForm">                      
                              <div>基本信息</div>  
                                <div class="personalFormContent">
                                    <div class=" requiredInput">用户名</div>
                                    <input type="text" data-id="username">
                                </div>
                                <div class="personalFormContent">
                                    <div class=" requiredInput">开始工作</div>
                                    <input type="text" data-id="startWorkYear">
                                </div>
                                <div class="personalFormContent">
                                    <div class=" requiredInput">职业方向</div>
                                    <input type="text" data-id="profession">
                                </div>
                                <div class="personalFormContent">
                                    <div>职位</div>
                                    <input type="text" data-id="position">
                                </div>
                                <div class="personalFormContent">
                                    <div>公司</div>
                                    <input type="text" data-id="company">
                                </div>
                                <div class="personalFormContent">
                                    <div>邮箱</div>
                                    <input type="text" data-id="email">
                                </div>
                                <div class="personalFormContent">
                                    <div>密码</div>
                                    <input type="text" data-id="password">
                                </div>
                                <div class="personalFormContent">
                                    <div>个人介绍</div>
                                    <input type="text" data-id="introduction">
                                </div>
                                <div>兴趣标签管理</div>
                                <div class="interestBox">
                                    <div class="requiredInput interestBox01">兴趣标签</div>
                                    <div class="interestBox02">
                                        <ul class="interestTagsDisplay">
                                            <div class="displayLiCue">请从下列标签中至少选择一项</div>
                                            
                                        </ul>
                                        <div class="interestTagsBox">
                                            <ul> </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="keepButtonBox">
                                    <div class="keepButton">保存修改</div>
                                </div>
                            </div>
                            <div class="personalPhotoContainer">
                                <div  class="personalPhotoBox">
                                    <label for="changeImg" id="changeImgLabel">
                                        
                                            <img src="./images/头像.svg" alt="头像" id="previewImage" >
                                        
                                    </label>
                                    <input type="file" id="changeImg" accept="image/*" style="display: none;" >
                                    <span>上传头像</span>
                                    <div>
                                        格式：支持JPG、PNG、JPEG <br>
                                        大小：不超过5M              
                                    </div>
                                </div>
                            </div>
                        </div>
                      </div>  
                      </div>
                  </div>
                </div>
                <!-- 搜索页面 -->
                 <div class="searchPageBox" data-box="searchPageBox">
                    <div class="searchPageHeader">
                        <ul class="searchPageHeaderNav">
                            <li>综合</li>
                            <li>文章</li>
                            <li>课程</li>
                            <li>标签</li>
                            <li>用户</li>
                        </ul>
                    </div>
                    <div class="searchPageMain">
                        <div class="searchPageMainNav">
                            <span>综合排序</span>
                            <span>最先排序</span>
                            <span>最热排序</span>
                        </div>
                           <div class="searchPageMainContentBox">
                            <div class="searchPageMainContent">
                                <div class="searchPageMainContentIntro">
                                    <div class="searchPageMainContentTime">2025</div>
                                    <div class="searchPageMainContentTitle">标题</div>
                                    <div class="searchPageMainContentText">
                                        内容ujdfhsvuivujsjdfiujsiduofjoisdjfoijsoifujsduifjuisododughsiduh124311111111111111111111111111111111111111111111111111111111111111111111
                                    </div>
                                    <div class="searchPageMainContentFooter">
                                        <span>浏览:1</span>
                                        <span>收藏:2</span>
                                        <span>点赞:3</span>
                                    </div>
                                </div>
                                <div class="searchPageMainContentImg">
                                    <img src="./images/头像.svg" alt="图片">
                                </div>
                            </div>
                           
                                <div class="searchPageMainContentUser">
                                    <div class="searchPageMainContentUserImg">
                                        <img src="./images/头像.svg" alt="图片">
                                    </div>
                                    <div class="searchPageMainContentUserInfo">
                                        用户名
                                    </div>
                                    <div class="searchPageMainContentUserFollow">关注</div>
                                </div>
                            
                           </div>
                    </div>
                 </div>
                 <!-- 详细文章阅读 -->
                  <div class="articleReadPageBox" data-box="articleReadPageBox">
                    <div class="articleReadPage">
                        <div class="articleReadPageLeft">
                            <div  class="commentBc"><img src=".\images\点赞.svg" alt="" id="like"></div>
                            <div class="commentBc"><img src=".\images\bg-chat.svg" alt=""></div>
                            <div class="commentBc"><img src=".\images\收藏.svg" alt="" id="collect"></div>
                            <div class="commentBc"><img src=".\images\转发.svg" alt=""></div>
                            <div class="commentBc"><img src=".\images\举报.svg" alt=""></div>
                            <div class="commentBc"><img src=".\images\沉浸阅读.svg" alt=""></div>
                        </div>
                        <div class="articleReadPageMiddle">
                            <div class="articleReadPageMiddleTextBox">
                                <div class="articleReadPageMiddleHead">
                                    <h1>标题</h1>
                                    <span>2025</span>
                                </div>
                                <div class="articleReadPageMiddleText"></div>
                            </div>
                            <div class="articleReadPageMiddleComment">
                                <div class="articleReadPageMiddleCommentHeader">评论</div>
                                <div class="articleReadPageMiddleCommentInputBox">
                                    <div class="articleReadPageMiddleCommentInput">
                                        <img src=".\images\用户头像.svg" alt="用户头像">
                                        <div class="commentBox">
                                            <input type="text" placeholder="平等表达，友善交流" maxlength="100">
                                            <div class="commentBoxButton">
                                                <div>0/100</div>
                                                <div>发送</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="noloinBox">
                                        <div class="noLoinBoxImg"><img src=".\images\用户头像.svg" alt="用户头像"></div>
                                        <div class="noloingBoxText">登录后可发表评论</div>
                                    </div>
                                </div>
                                <div class="articleReadPageMiddleCommentDisplay">
                                    <div class="userCommentBox">
                                        <div class="userCommentImg">
                                            <img src=".\images\用户头像.svg" alt="用户头像">
                                        </div>
                                        <div class="userCommentInfo">
                                            <div class="userCommentName">用户123</div>
                                            <div class="userCommentContent">1111</div>
                                            <div class="userCommentFooter">
                                                <span>评论</span>
                                                <span>删除</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="articleReadPageRight">
                        
                            <h3 class="articleReadPageList">目录</h3>
                            <div class="articleReadPageListContent">内容</div>
                        </div>

                    </div>

                  </div>
                  <!-- 发表文章 -->
                   <div class="publishArticleBox" data-box="publishArticleBox">
                    <div class="publishArticle">
                    
       
                     <input type="text" placeholder="请输入标题" class="publishTitle">
                     <textarea placeholder="请输入内容" class="publishContent" ></textarea>
                     <input type="text" placeholder="概括" class="publishSummary">
                     <input type="text" placeholder="请输入标签" class="publishTag">
                     <input type="text" placeholder="请输入分类:0是前端,1是后端,2是算法,3是其他" class="publishClassify">
                    
                    <div class="publishBtn">发布</div>
                </div>  
                </div>
             </div>
             <!-- yoyo 弹窗 -->
            <div class="popUpLogin">
                <div class="popUpImgBox"><img class="popUpImg" src="./images/yoyo.3df25da.png"></img></div>
                <div class="popUpMain">
                    <div class="popUpMain01">
                        <h2>登录掘金领取礼包</h2>
                        <img src=".\images\错叉_块.svg"></img>
                    </div>
                    <h4 class="popUpMain02">更多登录后权益等你解锁</h4>
                    <div class="popUpMain03">登录/注册</div>
                </div>
                </div>
               
            </div>
            
        </div>
 
     <script src="./index.js" type="module">  </script>
     <script src="./AjaxBox.js" type="module"></script>
     <script src="./control.js" type="module"></script>

    </body>
</html>